<template>
  <div class="w-screen h-screen bg-white">
    <el-container class="w-full h-full overflow-hidden">
      <el-header class="border-b border-gray-200">
        <Header />
      </el-header>
      <el-container class="w-full h-full overflow-hidden">
        <el-aside :width="sidebarOpen?'260px':'64px'">
          <Sidebar :sidebar-open="sidebarOpen"/>
        </el-aside>

        <!-- 侧边栏折叠控制按钮 -->
        <button
          @click="toggleSidebar"
          class="h-8 w-6 flex items-center justify-center cursor-pointer absolute top-1/2 transform -translate-y-1/2 z-10 shadow-md bg-amber-500"
          :class="{
          'rounded-l-full left-59': sidebarOpen,
          'rounded-r-full left-16': !sidebarOpen,
        }"
        >
          <el-icon class="text-primary text-lg">
            <svg-icon name="arrow-left" v-if="sidebarOpen" />
            <svg-icon name="arrow-right" v-else />
          </el-icon>
        </button>

        <el-main class="bg-gray-100">
          <MainContent />
        </el-main>
      </el-container>
      <el-footer class="bg-white border-t border-gray-200 py-4">
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import MainContent from './components/MainContent.vue'
import Footer from './components/Footer.vue'

// 侧边栏状态
const sidebarOpen = ref(true)

// 切换侧边栏
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}
</script>

<style scoped>
/* 自定义样式 */
</style>
